<template>
    <h2>添加会员信息</h2>
<table class="table table-bordered">
    <tr>
        <td>用户名</td>
        <td>
            <input type="text" placeholder="请输入用户名" v-model="info.M_Name"/>

        </td>
    </tr>
    <tr>
        <td>密码</td>
        <td>
            <input type="password" placeholder="请输入密码" v-model="info.M_Pwd"/>
            
        </td>
    </tr>
    <tr>
        <td>真实姓名</td>
        <td>
            <input type="text" placeholder="请输入真实姓名" v-model="info.M_Truename"/>
            
        </td>
    </tr>
    <tr>
        <td>邮箱</td>
        <td>
            <input type="text" placeholder="请输入邮箱" v-model="info.M_Email"/>
            
        </td>
    </tr>
    <tr>
        <td>手机号</td>
        <td>
            <input type="text" placeholder="请输入手机号" v-model="info.M_Phone"/>
            
        </td>
    </tr>
    <tr>
        <td>身份证号</td>
        <td>
            <input type="text" placeholder="请输入身份证号" v-model="info.M_IdCard" @change="GetBirthday"/>
            
        </td>
    </tr>

    <tr>
        <td>出生日期</td>
        <td>
            <input type="date" v-model="info.M_Birthday" readonly/>
            
        </td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio"  :value="true" v-model="info.M_Sex"/>男
            <input type="radio" :value="false" v-model="info.M_Sex"/>女
            
        </td>
    </tr>

    <tr>
        <td>积分余额</td>
        <td>
            <input type="text"  placeholder="请输入积分余额" v-model="info.M_Integral"/>
            
            
        </td>
    </tr>

    <tr>
        <td>金额</td>
        <td>
            <input type="text"  placeholder="请输入金额" v-model="info.M_Money"/>
            
            
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <input type="radio"  :value="true" v-model="info.M_State"/>启用
            <input type="radio" :value="false" v-model="info.M_State" />禁用
            
            
        </td>
    </tr>
    <tr>
        <td>会员类型</td>
        <td>
           <select v-model="info.MT_Id">
            <option :value="0">--请选择--</option>
            <option v-for="item in MemberTypeInfo" :value="item.MT_Id">{{ item.MT_Name }}</option>
           </select>    
        </td>
    </tr>

    <tr>
        <td></td>
        <td>
            <input type="button" value="保存"  @click="SaveData"/>
        </td>
    </tr>

</table>

</template>


<script setup lang="ts">
import { onMounted ,ref} from "vue";
import axios from "axios";


//创建响应式数据 （用于保存会员类型信息）
const MemberTypeInfo=ref([{
    MT_Id:0,
    MT_Name:""
}]);



//创建响应式数据（用于保存会员信息）

const info=ref({
    M_Name:"",
    M_Pwd:"",
    M_Truename:"",
    M_Email:"",
    M_Phone:"",
    M_IdCard:"",
    M_Birthday:"",
    M_Sex:true,
    M_Integral:"",
    M_Money:"",
    M_State:true,
    MT_Id:0,


})

//根据身份证号获取生日日期
const GetBirthday=()=>{
//通过截取方式获取身份证号获取出生日期
 var bir=info.value.M_IdCard.substring(6,14);
//依次获取出生的年月日
var year =bir.substring(0,4);
var month=bir.substring(4,6);
var day=bir.substring(6,8);
//拼接该出生日期
info.value.M_Birthday=year+'-'+month+'-'+day;

}

//保存会员信息

const SaveData=()=>{
//验证用户名不能为空
if(info.value.M_Name==""){
    alert("用户名不能为空");
    return;
}

//通过正则验证输入内容 必须为中文
var reg=/^([\u4e00-\u9fa5]{2,6})$/;
if(!reg.test(info.value.M_Truename))
{
    alert("用户名必须为中文");
    return;

}

//邮箱的正则验证
var rig=/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(!rig.test(info.value.M_Email)){
    alert("邮箱格式不对");
    return;
}
//身份证号的正则验证
   var sfz=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  if(!sfz.test(info.value.M_IdCard))
  {
    alert("身份证格式不对");
    return;
  }



//验证金额必须大于0
if(Number(info.value.M_Money)<=0)
{
alert("金额必须大于0");
return;
}

//判断当前所选类型会员
if(info.value.MT_Id==1)
{
    alert("类型必须为会员类型");
    return;
}


axios.post("https://localhost:7153/api/Member/AddMember/AddMember",info.value)
.then(res=>{

    if(res.data>0){
        alert("添加成功");
    }
    else if(res.data==-1){
     alert("账号已经存在");
    }
    else{
        alert("添加失败");
    }

})

}


//创建生命周期钩子函数 onMounted为注册生命周期钩子
onMounted(()=>{
    //调用会员类型数据加载方法
    LoadType();
})
//完成会员类型加载
const LoadType=()=>{
axios.get("https://localhost:7153/api/Member/ShowType/ShowType")
 .then(res=>{
    //请求成功
    MemberTypeInfo.value=res.data;


 })
 .catch(err=>{
    //请求失败时
    console.log(err);
 })

}


</script>